import * as echarts from 'echarts';
export default {
    //泊位统计柱状图
    truckUser(id, res) {
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var seriesDta = res;
        var series = []
        var legendData = [];
        var size = seriesDta.length;
        for (var i = 0; i < size; i++) {
            legendData.push(seriesDta[i].name);
            var color;
            if (i == 0) {
                color = '#2e57f8';
            } else {
                color = '#fe645d';
            }
            series.push({
                name: seriesDta[i].name,
                type: 'bar',
                //柱状大小
                barWidth: 10,
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'right', //在上方显示
                            textStyle: { //数值样式
                                color: '#fff',
                                fontSize: 10
                            }
                        }
                    }
                },
                data: [seriesDta[i].data.idle, seriesDta[i].data.use, seriesDta[i].data.err],
                color: color
            });
        }
        var option;

        option = {
            title: {
                // text: '世界人口总量',
                // subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: legendData,
                //底部
                bottom: 0,
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                left: '4%',
                right: '6%',
                bottom: '4%',
                top: '4%',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: { show: false },
                axisLine: { //y轴隐藏
                    show: false
                },
                axisTick: { //y轴刻度线
                    show: false
                },
            },
            yAxis: {
                type: 'category',
                data: ['空闲', '占用', '故障'],
                splitLine: { show: false },
                axisLine: { //轴隐藏
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                }
            },
            series: series

        };
        myChart.setOption(option);
    },
    //支付方式统计环形饼状图
    rangChart(id, res) {
        console.log(res)
        var colors = [];
        // 1：现金 2：支付宝 3：微信 4:移动支付
        for (let i = 0; i < res.length; i++) {
            colors.push('#e37e11', '#00a6eb', '#07c160', '#e5e707')
            res[i].label = { show: true, fontSize: "13", fontWeight: "bold" };
            switch (res[i].name) {
                case 1:
                    // res[i].name = "现金";
                    res[i].name = "其他";
                    res[i].itemStyle = { color: '#e37e11' }
                    break;
                case 2:
                    res[i].name = "支付宝";
                    // res[i].name = "现金";
                    res[i].itemStyle = { color: '#00a6eb' }
                    break;
                case 3:
                    res[i].name = "微信";
                    res[i].itemStyle = { color: '#07c160' }
                    break;
                case 4:
                    res[i].name = "移动支付";
                    res[i].itemStyle = { color: '#e5e707' }
                    break;
            }
        }
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                x: 'right',
                orient: 'vertical',
                y: 'bottom',
                // right: 10,
                textStyle: { //图例文字的样式
                    color: colors,
                    fontSize: 12
                },

            },
            series: [{
                type: 'pie',
                radius: [25, 40],
                center: ['40%', '60%'],
                width: 400,
                label: {
                    formatter: function(param) {
                        return param.name + '(' + param.value + '笔)';
                    }
                },
                data: res
            }]
        };
        myChart.setOption(option);
    },
    pieChart(id, res, type) {
        var colors = [];
        colors.push('#00a7fd', '#ffb842')
        if (type == 1) {
            for (let i = 0; i < res.length; i++) {
                res[i].label = { show: true, fontSize: "12", fontWeight: "bold" };
                switch (res[i].name) {
                    case 1:
                        res[i].name = "在线";
                        res[i].itemStyle = { color: '#00a7fd' }
                        break;
                    case 0:
                        res[i].name = "离线";
                        res[i].itemStyle = { color: '#ffb842' }
                        break;
                }
            }
        } else {
            let replay = [];
            let r1 = { "label": { show: true, fontSize: "12", fontWeight: "bold" }, "name": "总数", "value": res.all, "itemStyle": { color: '#00a6eb' } };
            replay.push(r1)
            let r2 = { "label": { show: true, fontSize: "12", fontWeight: "bold" }, "name": "已处理", "value": res.replay, "itemStyle": { color: '#e37e11' } };
            replay.push(r2)
            res = replay;
        }
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                // text: '某站点用户访问来源',
                // subtext: '纯属虚构',
                left: 'center'
            },

            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                textStyle: { //图例文字的样式
                    color: colors,
                    fontSize: 12
                },
            },
            series: [{
                name: '',
                type: 'pie',
                radius: '50%',
                //环形位置
                center: ['35%', '50%'],
                data: res,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true,
                    formatter: "{d}%"
                }
            }]
        };
        myChart.setOption(option);
    },
    /**玫瑰统计图 */
    areaChart(id, res) {
        var data = [];
        var one = { "name": "0-15分钟", "value": res.one };
        data.push(one)
        var two = { "name": "15-30分钟", "value": res.two };
        data.push(two)
        var three = { "name": "30分钟-2小时", "value": res.three };
        data.push(three)
        var four = { "name": "2小时以上", "value": res.four };
        data.push(four)
            // var five = { "name": "6小时以上", "value": res.five };
            // data.push(five)

        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                textStyle: { //图例文字的样式
                    color: '#889988',
                    fontSize: 12
                },
            },
            toolbox: {
                show: true,
            },
            series: [{
                name: '',
                type: 'pie',
                radius: [32, 50],
                center: ['40%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 6,
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#fff',
                                fontSize: 10
                            },
                            formatter: function(params) {
                                return params.name + '(' + params.value + ')';
                            }
                        },
                    },
                },
                data: data,
                color: ['#2e57f8', '#00a4fe', '#fed84c', '#fd635e', '#01f202']
            }]
        };
        myChart.setOption(option);
    },
    //7日内统计柱状图
    weekOrder(id, res, name) {
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                // text: name,
                text: name,
                textStyle: {
                    //文字颜色
                    color: '#e37c11',
                    fontStyle: 'normal',
                    fontWeight: 'bold',
                    //字体系列
                    fontFamily: 'sans-serif',
                    //字体大小
                    fontSize: 16,
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                left: 0,
                top: 0,
                textStyle: {
                    color: "#fff"
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                y: '40%',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: { show: false },
                axisLine: { //y轴隐藏
                    show: false
                },
                axisTick: { //y轴刻度线
                    show: false
                },
            },
            yAxis: {
                type: 'category',
                data: ['应收金额', '实收金额', '欠费金额'],
                splitLine: { show: false },
                axisLine: { //轴隐藏
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                }
            },
            series: [{
                name: '',
                type: 'bar',
                //柱状大小
                barWidth: 16,
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            // position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#fff',
                                fontSize: 10
                            }
                        },
                        color: function(params) {
                            var colorList = ['#02aaee', '#e37e11', '#e8dd02'];
                            return colorList[params.dataIndex];
                        }
                    },
                },
                data: [res.all, res.reality, res.arrears],
                emphasis: {
                    focus: 'series'
                },
            }]
        };
        myChart.setOption(option);
    },
    //柱状图
    truckTimes(id, res, type) {
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var suffix;
        var option;
        var xData;
        var seriesData;
        var color;
        if (type == 1) {
            xData = ['泊位周转率(当天)', '泊位利用率(当天)'];
            seriesData = [res.data.turnover, res.data.usage];
            suffix = '%';
            color = ['#fe645d', '#ffdb4e'];
        } else {
            xData = ['总用户数', '今日用户注册数']
            seriesData = [res.data.alive, res.data.register];
            suffix = '人';
            color = ['#2e57f8', '#00a7fd'];
        }
        option = {
            grid: {
                y: '7%',
                y2: '1%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                },
                data: xData
            },
            yAxis: {
                type: 'value',
                axisLine: { //轴隐藏
                    show: false
                },
                axisTick: { //x轴刻度线
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                }
            },
            series: [{
                data: seriesData,
                type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            // position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#fff',
                                fontSize: 10
                            },
                            formatter: function(params) {
                                return params.value + suffix;
                            }
                        },
                        color: function(params) {
                            var colorList = color;
                            return colorList[params.dataIndex];
                        }
                    },
                },
            }]
        };
        myChart.setOption(option);
    },
    //渐变面积曲线图
    areaSChart(id, res) {
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '当天某时段泊位使用个数',
                textStyle: {
                    color: "#fff",
                    fontSize: 13,
                }
            },
            color: ['#80FFA5'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['3h', '6h', '9h', '12h', '15h', '18h', '21h', '24h'],
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                },
            }],
            yAxis: [{
                type: 'value',
                axisLine: { //轴隐藏
                    show: false,
                },
                axisTick: { //x轴刻度线
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                },
            }],
            series: [{
                    name: '',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#6321be'
                        }, {
                            offset: 1,
                            color: '#100449'
                        }])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [res.one, res.two, res.three, res.four, res.five, res.six, res.seven, res.event],
                }


            ]
        };
        myChart.setOption(option);
    },
    //K线图
    KChart(id, res) {
        var chartDom = document.getElementById(id);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '当天某时段泊位使用个数',
                textStyle: {
                    color: "#fff"
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['泊位使用数'],
                textStyle: {
                    color: "#fff"
                }
            },
            toolbox: {
                show: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                },
                data: ['0-3h', '3-6h', '6-9h', '9-12h', '12-15h', '15-18h', '18-21h', '21-24h']
            },
            yAxis: {
                type: 'value',
                axisLine: { //轴隐藏
                    show: false,
                },
                axisTick: { //x轴刻度线
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '泊位占用',
                type: 'line',
                data: [res.one, res.two, res.three, res.four, res.five, res.six, res.seven, res.event],
            }]
        };
        myChart.setOption(option);
    }
}